import React,{Component} from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import './list.less';
const prefix = "mobile-list";
class MobileList extends Component{
    render(){
        let {listSource,panelSource,defaultIndex} = this.props;
        let listEle = listSource.map((value,index)=>{
            return(
                <Tab className={prefix+'-tab'} key={index}>{value}</Tab>
            )
        });
        let panelEle = panelSource.map((value,index)=>{
           return(
               <TabPanel key={index}>
                   {value}
               </TabPanel>
           )
        });
        return(
            <Tabs className={prefix} selectedTabClassName={prefix+"-select"} defaultIndex={parseInt(defaultIndex,10)}>
                <TabList className={classNames(prefix+'-tabList','clearfix')}>
                    {listEle}
                </TabList>
                {panelEle}
            </Tabs>
        )
    }
}
export default MobileList;
MobileList.propTypes = {
  listSource:PropTypes.array.isRequired,
  panelSource:PropTypes.array.isRequired,
  defaultIndex:PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ]).isRequired
};